<template>
  <div class="chart" ref="rightTopChart"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { getRightTopData } from '@/api/data-screen/right-charts';

onMounted(() => {
  getChartData()
})

// 获取图表所需的数据
function getChartData() {
  getRightTopData().then(result => {
    const chartData = transformData(result.data)
    console.log(result)
    const processedData = chartData.map((row, index) => {
      // 示例原始数据结构: [学院名称, 年份, 数值]
      return [
        row[0],          // 原始名称
        row[1],          // 年份
        row[2],          // 数值
        `${row[0]}_${index}` // 唯一标识（用于Y轴定位）
      ];
    });
    initRightTopChart(processedData)
  })
}

// 格式化后端返回的数据
function transformData(originalData) {
  // 1. 创建带表头的二维数组
  const transformed = [
    ['学院', '年份', '人数'] // 表头保持不变
  ];

  // 2. 直接映射原始数据
  originalData.forEach(item => {
    transformed.push([
      item.college, // 保留原始学院名称
      parseInt(item.enlistmentDate, 10), // 年份转为数字类型
      item.nums // 直接使用原始数值
    ]);
  });
  return transformed;
}

// 获取根元素字体大小
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);

// 定义一个函数，将 rem 转换为像素值
function remToPx(rem) {
  return rem * rootFontSize;
}

//右上动态柱形图
const rightTopChart = ref<HTMLElement | null>(null);
// 初始化
let rightTopChartInstance: echarts.ECharts | null = null;
const initRightTopChart = (chartData: any[]) => {
  if (rightTopChart.value) {
    rightTopChartInstance = echarts.init(rightTopChart.value);
    updateRightTopChart(chartData);
  }
};
// 更新数据
const updateRightTopChart = async (chartData: any[]) => {
  try {
    var option;
    const updateFrequency = 3000; // 更新频率

    // 定义学院颜色映射
    const collegeColors: { [key: string]: string } = {
      // '计算机学院': '#4daf4a',
      // '机械学院': '#f00',
    };

    // 自定义数据：近十年的数据
    const customData = chartData;
    console.log(customData)
    // 提取年份
    const years: string[] = [];
    for (let i = 1; i < customData.length; ++i) {
      const year = customData[i][1].toString();
      if (years.length === 0 || years[years.length - 1] !== year) {
        years.push(year);
      }
    }

    let startIndex = 0;
    let startYear = years[startIndex];

    option = {
      grid: {
        top: remToPx(0.5),
        bottom: remToPx(3.2),
        left: remToPx(6),
        right: remToPx(2)
      },
      xAxis: {
        max: 'dataMax',
        axisLine: {
          lineStyle: {
            color: '#ccc',
          }
        },
        axisLabel: {
          formatter: function (n: number) {
            return Math.round(n) + '';
          }
        }
      },
      dataset: {
        source: chartData.slice(1)
          .filter(d => d[1].toString() === startYear)
          .sort((a, b) => b[2] - a[2]) // 只需按数值排序
      },
      yAxis: {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: '#ccc'
          }
        },
        inverse: true,
        max: 7,
        axisLabel: {
          // 显示原始名称（隐藏唯一后缀）
          formatter: (value: string) => value.split('_')[0],
          fontSize: remToPx(0.7)
        },
        animationDuration: 300,
        animationDurationUpdate: 300
      },
      series: [
        {
          realtimeSort: true,
          seriesLayoutBy: 'column',
          type: 'bar',
          itemStyle: {
            //每条柱子采用不同的颜色
            // color: function (param: any) {
            //     return collegeColors[param.value[0]] || '#5470c6';
            // }
            //采用渐变色
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,


              colorStops: [
                {
                  offset: 0, color: 'rgb(41, 128, 185)' // 渐变起始颜色
                },
                {
                  offset: 0.5, color: 'rgb(109, 213, 250)' // 渐变起始颜色
                },
                {
                  offset: 1, color: 'rgb(255, 255, 255)' // 渐变结束颜色
                }
              ]
            }
          },
          encode: {
            x: 2, // 绑定到人数列
            y: 3  // 绑定到学院列
          },
          //柱子数值
          label: {
            show: true,
            precision: 1,
            position: 'right',
            valueAnimation: true,
            //fontFamily: 'monospace',
            color: '#DCDCDC'
          }
        }
      ],
      animationDuration: 0,
      animationDurationUpdate: updateFrequency,
      animationEasing: 'linear',
      animationEasingUpdate: 'linear',
      //年份配置信息
      graphic: {
        elements: [
          {
            type: 'text',
            right: remToPx(0.6),
            bottom: remToPx(3),
            style: {
              text: startYear,
              font: 'bolder 3rem monospace',
              fill: 'red'
            },
            z: 100
          }
        ]
      }
    };

    rightTopChartInstance.setOption(option);

    // 循环播放
    for (let i = startIndex; i < years.length; ++i) {
      const update = function (i: number) {
        setTimeout(function () {
          updateYear(years[i]);
        }, (i - startIndex) * updateFrequency);
      };
      update(i);
    }

    // 循环到最后一年后重新开始
    setTimeout(function () {
      updateRightTopChart(chartData);
    }, (years.length - startIndex) * updateFrequency);

    // 将函数声明改为函数表达式
    const updateYear = function (year: string) {
      let source = customData.slice(1).filter(function (d) {
        return d[1].toString() === year;
      });
      option.dataset.source = source;
      option.graphic.elements[0].style.text = year;
      rightTopChartInstance.setOption(option);
    };
  } catch (error) {
    console.error("获取右上动态柱形图折线图数据失败:", error);
  }
};

</script>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>